<template>
  <div class="container">
    <div class="header">
      <span>出单员工: {{salenum}}人</span>
      <span>人均: {{saleper}}单</span>
    </div>
    <scroll-view :scroll-y="true" :style="{height: scrollHeight +'px'}">
      <ul v-if="saleList.length != 0">
        <li v-for="item in saleList" :key="item.id" @tap="goto_user(item.id)">
          <div class="left flex-item">
            <span class="user_pic">
              <img :src="item.headurl || 'http://mytimg.178mr.com/myt_default.jpg'" alt>
            </span>
            <span class="user_name">{{item.name}}</span>
          </div>
          <div class="right">
            <span>{{item.num}}单</span>
          </div>
        </li>
      </ul>
      <ul v-else>
        <Empty message="没有员工数据!"></Empty>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      saleList: [],
      scrollHeight: 0,
      salenum: 0,
      saleper: 0
    }
  },
  components: {
    Empty
  },
  async onLoad () {
    let that = this
    await Promise.all([
      that.getswiperheight(),
      that.getsaleusertoday()
    ])
  },
  methods: {
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        that.scrollHeight = res.windowHeight - 40
      } catch (e) {
        console.log(e)
      }
    },
    async getsaleusertoday () {
      let that = this
      const userInfo = wx.getStorageSync('userInfo')
      let paramObj = {
        jsonshop: that.$route.query.jsonshop,
        floor: userInfo.floor,
        departmentid: userInfo.departmentid
      }
      let res = await api.getsaleusertoday(paramObj)
      if (res.code === '100') {
        let salenum = 0
        let saleorder = 0
        let saleper = 0
        res.data.forEach(item => {
          if (item.num !== 0) {
            salenum = salenum + 1
            saleorder = saleorder + item.num
          }
        })
        saleper = Math.floor(saleorder / res.data.length)
        that.salenum = salenum
        that.saleper = saleper
        that.saleList = res.data
      } else {
        that.saleList = ''
      }
    },
    goto_user (id) {
      wx.setStorageSync('params_userid', id)
      this.$router.push({ path: '/pages/worker/checkEmployees/checkEmployees' })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
}
.header {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f44;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}
li {
  display: flex;
  position: relative;
  height: 128rpx;
  padding-left: 20rpx;
}
li::after {
  position: absolute;
  content: "";
  width: 98%;
  left: 20rpx;
  bottom: 0;
  height: 2rpx;
  background-color: rgba(153, 153, 153, 0.1);
}
li .left {
  display: flex;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
}
li .left .user_pic {
  display: flex;
  align-items: center;
}
li .left .user_name {
  margin-left: 30rpx;
  padding-top: 20rpx;
}
li .left .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
li .right {
  padding: 20rpx 20rpx 0 0;
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}
</style>

